<template>
  <div style="width: 100%; height: 100%;"
       class="flex-y w_box">
    <div id="p1"
         class="w100 h-full svg_contnet"
         style="flex: 1;">
      <svg ref="mysvg"
           id="s1"
           width="100%"
           height="100%"
           viewBox="0 0 1682.4 560"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:svg="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink">
        <image object-fit="cover"
               preserveAspectRatio="none meet"
               width="100%"
               id="svg_2"
               xlink:href="@/assets/device/p300.png"
               x="0"
               y="-200" />
        <g @mouseenter="mouseenterItem(item)"
           v-for="(item, index) in newList"
           :key="index"
           id="myGroup"
           :transform="`translate(${item.x || -100},${item.y || -100})`">
          >
          <filter id="glow">
            <feGaussianBlur stdDeviation="2.5"
                            result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
          <text :fill="rendererColor(item.deviceStatus)"
                font-size="24"
                id="svg_112"
                text-anchor="middle"
                stroke="#fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                xml:space="preserve"
                x="0"
                y="5">
            <tspan>{{ item.name }}</tspan>
          </text>
          <rect x="-79"
                y="-18"
                width="160"
                height="30"
                rx="3"
                ry="3"
                :fill="rendererColor(item.deviceStatus, 0.2)"
                :stroke="rendererColor(item.deviceStatus)"
                stroke-width="1"
                filter="url(#glow)"
                opacity="1" />

          <circle :class="item.deviceStatus == '101' ? 'loading-circle-1' : ''"
                  cx="0"
                  cy="20"
                  r="6"
                  :stroke="rendererColor(item.deviceStatus)"
                  :fill="rendererColor(item.deviceStatus)" />
        </g>
        <g>
          <line fill="none"
                id="svg_103"
                stroke="#00ff00"
                stroke-dasharray="5,5"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="3"
                x1="820"
                x2="800"
                y1="350"
                y2="270" />
          <image preserveAspectRatio="none"
                 height="170.00001"
                 id="svg_118"
                 width="288"
                 x="720"
                 y="340"
                 xlink:href="@/assets/device/xinxikuang.png" />
          <text fill="#07DCF5"
                font-family="serif"
                font-size="25"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="790"
                y="390">
            油淬火罐
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="800"
                y="420">
            实际温度:{{ area123.ychgRealTemp ? area123.ychgRealTemp : "0" }} ℃
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="800"
                y="450">
            设定温度:{{ area123.ychgSetTemp ? area123.ychgSetTemp : "0" }} ℃
          </text>
        </g>
        <g>
          <line fill="none"
                id="svg_103"
                stroke="#00ff00"
                stroke-dasharray="5,5"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="3"
                x1="550.59998"
                x2="560.59998"
                y1="275"
                y2="350" />
          <image preserveAspectRatio="none"
                 height="170.00001"
                 id="svg_118"
                 width="288"
                 x="420"
                 y="340"
                 xlink:href="@/assets/device/xinxikuang.png" />
          <text fill="#07DCF5"
                font-family="serif"
                font-size="25"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="495"
                y="390">
            水淬火罐
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="505"
                y="420">
            实际温度:{{ area123.schgRealTemp ? area123.schgRealTemp : "0" }} ℃
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="505"
                y="450">
            设定温度:{{ area123.schgSetTemp ? area123.schgSetTemp : "0" }} ℃
          </text>
        </g>
        <g>
          <line fill="none"
                id="svg_103"
                stroke="#00ff00"
                stroke-dasharray="5,5"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="3"
                x1="1160.59998"
                x2="1400.59998"
                y1="120"
                y2="300" />
          <image preserveAspectRatio="none"
                 height="290.00001"
                 id="svg_118"
                 width="288"
                 x="1290"
                 y="280"
                 xlink:href="@/assets/device/xinxikuang.png" />
          <text fill="#07DCF5"
                font-family="serif"
                font-size="25"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1350"
                y="345">
            淬火炉
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1360.59998"
                y="375">
            氧气:{{ area123.chlO2 ? area123.chlO2 : "0" }} mV
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1355.59998"
                y="395">
            实际Cp:{{ area123.chlCp ? area123.chlCp : "0" }}
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1355.59998"
                y="415">
            设定Cp:{{ area123.chlCpSet ? area123.chlCpSet : "0" }}
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1380.59998"
                y="435">
            实际温度:{{ area123.chlRealTemp ? area123.chlRealTemp : "0" }}
            ℃
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1380.59998"
                y="455">
            设定温度:{{ area123.chlSetTemp ? area123.chlSetTemp : "0" }}
            ℃
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1390.59998"
                y="475">
            CH3OH流量:{{ area123.chlCH30HFlow ? area123.chlCH30HFlow : "0" }}
            l/h
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1395.59998"
                y="495">
            C3H8流量:{{ area123.chlC3H8Flow ? area123.chlC3H8Flow : "0" }}
            l/min
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1385.59998"
                y="515">
            O2流量:{{ area123.chlO2Flow ? area123.chlO2Flow : "0" }}
            l/min
          </text>
          <text fill="#07DCF5"
                font-family="serif"
                font-size="20"
                id="svg_222"
                opacity="0.75"
                stroke="#007fff"
                stroke-dasharray="null"
                stroke-linecap="null"
                stroke-linejoin="null"
                stroke-width="0"
                text-anchor="middle"
                xml:space="preserve"
                x="1390.59998"
                y="535">
            NH3流量:{{ area123.chlNH3Flow ? area123.chlNH3Flow : "0" }}
            l/min
          </text>
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { mixinReszie } from "@/mixin/resize.js";
import { generateId } from "@/utils";
import {
  DEVICE_LIST,
  DEVICE_STATE,
  NO_ANIME_TYPE,
  CENTRALIZED_TIME
} from "./constant";
import { hex2Rgba } from "@/utils/utils";
import initMqtt from "@/views/common/js/device/mqttUtils.js";
import SpotPoint from "@/components/SpotPoint";
import _ from "lodash";
export default {
  components: {
    SpotPoint
  },
  props: {
    resultArray: {
      type: Array,
      default: () => []
    }
  },
  mixins: [mixinReszie],
  computed: {
    ...mapGetters(["area123"]),
    newList() {
      return DEVICE_LIST.filter(item => {
        return !this.legendVal.includes(Number(item.deviceStatus));
      });
    },
    getTspan() {
      return function (tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        // firstRealTemp secondRealTemp thirdRealTemp
        switch (count) {
          case 1:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "6"
              }
            ];
          case 2:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "-10"
              },
              {
                key: "secondRealTemp",
                x: "-2",
                y: "6"
              }
            ];
          case 3:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "-25"
              },
              {
                key: "secondRealTemp",
                x: "0",
                y: "-10"
              },
              {
                key: "thirdRealTemp",
                x: "-2",
                y: "6"
              }
            ];

          default:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "6"
              }
            ];
        }
      };
    },
    // 获取矩形偏移
    getRectY() {
      return function (tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return -10;
          case 2:
            return -26;
          case 3:
            return -40;

          default:
            return -10;
        }
      };
    },
    // 获取矩形高度
    getRectHeight() {
      return function (tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return 20;
          case 2:
            return 36;
          case 3:
            return 50;

          default:
            return 20;
        }
      };
    },
    rendererColor() {
      return function (status, alpha = 1) {
        const color =
          !status || this.area123[status] > 0 ? "#52C41A" : "#929292";
        return hex2Rgba(color, alpha);
      };
    },
    screenWidth() {
      return window.screen.width >= 1920;
    }
  },
  data() {
    return {
      legendVal: [],
      legendList: DEVICE_STATE,
      row: {},
      option: {},

      point: [],
      config1: {
        number: [0]
        // content: "{nt}个",
      },
      loading: false,
      brder1Key: generateId(),
      legendData: [],
      DEVICE_LIST: DEVICE_LIST
    };
  },
  watch: {},
  async mounted() { },

  methods: {
    handleLegend(row) {
      const index = this.legendVal.findIndex(item => item == row.value);
      if (index == -1) {
        this.legendVal.push(row.value);
      } else {
        this.legendVal.splice(index, 1);
      }
    },
    mouseenterItem(row) {
      this.row = _.cloneDeep(row);
    },
    cursorPoint(evt, svg) {
      let pt = svg.createSVGPoint();
      pt.x = evt.clientX;
      pt.y = evt.clientY;
      return pt.matrixTransform(svg.getScreenCTM().inverse());
    },
    handleClick(evt) {
      let mysvg = this.$refs.mysvg;
      let pt = this.cursorPoint(evt, mysvg);
      const x = parseInt(pt.x);
      const y = parseInt(pt.y) - 20;
      console.log(`,x:${x},y:${y}`);
    }
  }
};
</script>
<style lang="scss">
.vue-tooltip.tooltip-custom {
  /* 这里进行父元素样式更改 */
  background-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-arrow {
  /* 下方的小三角形 */
  border-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-content {
  /* 矩形内容区域 */
  color: #333;
  padding: 6px 0;
  .tool_item {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
.svg_contnet {
  position: relative;
  .legend_list {
    position: absolute;
    left: 50px;
    top: 50px;
    .legend_item {
      cursor: pointer;
      margin-bottom: 10px;
      .legend_dot {
        margin-right: 6px;
        width: 30px;
        height: 14px;
        border-radius: 4px;
      }
    }
  }
}
.w_box {
  overflow-y: hidden !important;
}
@keyframes morph {
  0% {
    stroke-width: 10;
    stroke-opacity: 0.1;
  }

  25% {
    stroke-width: 30;
    stroke-opacity: 0.3;
  }

  50% {
    stroke-width: 10;
    stroke-opacity: 0.5;
  }

  75% {
    stroke-width: 10;
    stroke-opacity: 0.3;
  }

  100% {
    stroke-width: 10;
    stroke-opacity: 0;
  }
}

.loading-circle-1 {
  -webkit-animation: morph 2s ease infinite;
  animation: morph 2s ease infinite;
}
</style>
